<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实时监控</title>
    <meta name="context-path" th:content="@{/}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/bootstrap-responsive.min.css}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/matrix-style.css}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/matrix-media.css}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/css/matrix-full.css}"/>
    <link rel="stylesheet" th:href="@{/resources/matrix/font-awesome/css/font-awesome.css}"/>
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/resources/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/resources/colorpicker/spectrum.css}"/>
    <link rel="stylesheet" th:href="@{/resources/css/website.css}"/>
    <link rel="stylesheet" th:href="@{/resources/css/tree.css}"/>
</head>
<body class="treebody">
<div class="container-fluid child_main query-form">
    <div class="child_main_content">
        <div style="margin:0 10px;" class="layui-tab layui-tab-brief" lay-filter="real_charts">
            <ul class="layui-tab-title">
                <li class="layui-this">趋势图</li>
                <li>波形图</li>
                <li>频谱图</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div style="position:relative;width: 100%;height:30px;z-index:900;">
                        <div class="layui-collapse" lay-filter="query_trend"
                             style="position:absolute;width:100%;">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">查询条件</h2>
                                <div id="trend_query_panel" class="layui-colla-content"
                                     style="background: white; max-height:200px;">
                                    <div><span>时长：</span><select id="query_trend_interval">
                                        <option selected="selected" value="60">1小时</option>
                                        <option value="120">2小时</option>
                                        <option value="240">4小时</option>
                                        <option value="480">8小时</option>
                                    </select></div>
                                    <table class="dataintable">
                                        <thead>
                                        <th width="30%">名称</th>
                                        <th width="25%">编码</th>
                                        <th width="20%">特征值</th>
                                        <th width="15%">曲线颜色</th>
                                        <th width="10%"></th>
                                        </thead>
                                        <tbody id="trend_query_container">

                                        </tbody>
                                    </table>
                                    <div class="query_container_actions">
                                        <button id="btn_trend_query" class="btn btn-success">查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="trendchart" style="height:400px;margin-top:30px;"></div>
                </div>
                <div class="layui-tab-item">
                    <div style="position:relative;width: 100%;height:30px;z-index:900;">
                        <div class="layui-collapse" lay-filter="query_wave"
                             style="position:absolute;width:100%;">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">查询条件</h2>
                                <div id="wave_query_panel" class="layui-colla-content"
                                     style="background: white;max-height:200px;">
                                    <table class="dataintable">
                                        <thead>
                                        <th width="40%">名称</th>
                                        <th width="35%">编码</th>
                                        <th width="15%">曲线颜色</th>
                                        <th width="10%"></th>
                                        </thead>
                                        <tbody id="wave_query_container">

                                        </tbody>
                                    </table>
                                    <div class="query_container_actions">
                                        <button id="btn_wave_query" class="btn btn-success">查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="wavechart" style="height:400px;margin-top:30px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="child_main_tree">
        <div class="widget-box box-tree">
            <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                <h5>组态树</h5>
            </div>
            <div class="widget-content box-tree-content nopadding">
                <ul id="machineTree" class="ztree"></ul>
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{/resources/js/jquery.min.js}"></script>
<script th:src="@{/resources/js/jquery-migrate-1.2.1.js}"></script>
<script th:src="@{/resources/matrix/js/jquery.ui.custom.js}"></script>
<script th:src="@{/resources/matrix/js/bootstrap.min.js}"></script>
<script th:src="@{/resources/matrix/js/bootstrap-colorpicker.js}"></script>
<script th:src="@{/resources/matrix/js/bootstrap-datepicker.js}"></script>
<script th:src="@{/resources/matrix/js/masked.js}"></script>
<script th:src="@{/resources/matrix/js/jquery.uniform.js}"></script>
<script th:src="@{/resources/matrix/js/select2.min.js}"></script>
<script th:src="@{/resources/matrix/js/matrix.js}"></script>
<script th:src="@{/resources/matrix/js/jquery.peity.min.js}"></script>
<script th:src="@{/resources/layui/layui.all.js}" charset="utf-8"></script>
<script th:src="@{/resources/zTree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/resources/valid/js/bootstrapValidator.js}"></script>
<script th:src="@{/resources/valid/js/language/zh_CN.js}"></script>
<script th:src="@{/resources/colorpicker/spectrum.js}"></script>
<script th:src="@{/resources/js/website.js}"></script>
<script th:src="@{/resources/js/system.js}"></script>
<script th:src="@{/resources/js/validation_fields.js}"></script>
<script th:src="@{/resources/js/monitor/monitor_tree.js}"></script>
<script th:src="@{/resources/echarts/echarts.min.js}"></script>
<script th:src="@{/resources/js/monitor/chart/chart_query.js}"></script>
<script th:src="@{/resources/js/monitor/chart/real_trend_chart.js}"></script>
<script th:src="@{/resources/js/monitor/chart/real_wave_chart.js}"></script>
<script th:inline="javascript">
    var contextRoot = $("meta[name='context-path']").attr("content");

    layui.use(['form', 'element', 'layer'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;

        var currentChart = null;
        var addTreeNode = function (treeNode) {
            currentChart.addTreeNode(treeNode);
        };

        var tree = new MonitorTree("machineTree", addTreeNode);
        tree.initChart();

        var trendQuery = new ChartQuery("trend_query_container", tree);

        var trendChart = new RealTrendChart({
            chartId: "trendchart",
            chartQuery: trendQuery,
            getInterval: function () {
                return $("#query_trend_interval").val();
            }
        });
        currentChart = trendChart;
        trendChart.init();

        var waveQuery = new ChartQuery("wave_query_container", tree, false);
        var waveChart = new RealWaveChart({
            chartId: "wavechart",
            chartQuery: waveQuery
        });

        $("#btn_trend_query").click(function () {
            trendChart.begin();
            $("#trend_query_panel").removeClass("layui-show");
        });

        $("#btn_wave_query").click(function () {
            waveChart.begin();
            $("#wave_query_panel").removeClass("layui-show");
        });

        element.on('tab(real_charts)', function (data) {
            if (data.index == 0) {
                //趋势图
                currentChart = trendChart;
            }
            else if (data.index == 1) {
                //波形图
                currentChart = waveChart;
                waveChart.makesureInit();
            }
            else if (data.index == 2) {
                //频谱图
            }
        });
    });
</script>
</body>
</html>